﻿@namespace BootstrapBlazor.Components
@inherits BootstrapComponentBase

<div @attributes="@AdditionalAttributes" class="@ClassName">
    <div class="picker-panel-body-wrapper">
        @if (ShowSidebar)
        {
            <div class="picker-panel-sidebar">
                <div class="sidebar-item">
                    <DatePickerCell Value="@DateTime.Today" Text="@Today" OnClick="@(async d => await OnClickShortLink(d))" />
                </div>
                <div class="sidebar-item">
                    <DatePickerCell Value="@DateTime.Today.AddDays(-1)" Text="@Yesterday" OnClick="@(async d => await OnClickShortLink(d))" />
                </div>
                <div class="sidebar-item">
                    <DatePickerCell Value="@DateTime.Today.AddDays(-7)" Text="@Weekago" OnClick="@(async d => await OnClickShortLink(d))" />
                </div>
            </div>
        }
        <div class="picker-panel-body">
            <div class="@DateTimeViewClassName">
                <span class="date-picker-editor-wrap">
                    <input type="text" autocomplete="off" readonly placeholder="@DatePlaceHolder" class="input-inner form-control" value="@DateValueString">
                </span>
                <span class="date-picker-editor-wrap">
                    <input type="text" autocomplete="off" readonly placeholder="@TimePlaceHolder" class="input-inner form-control" value="@TimeValueString" @onclick="@OnClickTimeInput">
                    <TimePickerBody @bind-Value="CurrentTime" OnClose="@OnTimePickerClose" OnConfirm="@OnTimePickerClose" />
                </span>
            </div>
            <div class="date-picker-header">
                @if (ShowLeftButtons)
                {
                    <button type="button" aria-label="@AiraPrevYearLabel" class="picker-panel-icon-btn" @onclick="@OnClickPrevYear">
                        <i class="fa fa-angle-double-left"></i>
                    </button>
                    <button type="button" aria-label="@AiraPrevMonthLabel" class="@PrevMonthClassName" @onclick="@OnClickPrevMonth">
                        <i class="fa fa-angle-left"></i>
                    </button>
                }
                <div class="d-flex align-items-center justify-content-center flex-fill">
                    <DynamicElement TagName="span" role="button" class="date-picker-header-label" TriggerClick="@(!IsRange)" OnClick="@(() => SwitchView(DatePickerViewModel.Year))">@YearString</DynamicElement>
                    <DynamicElement TagName="span" role="button" class="@CurrentMonthViewClassName" TriggerClick="@(!IsRange)" OnClick="@(() => SwitchView(DatePickerViewModel.Month))">@MonthString</DynamicElement>
                </div>
                @if (ShowRightButtons)
                {
                    <button type="button" aria-label="@AiraNextMonthLabel" class="@NextMonthClassName" @onclick="@OnClickNextMonth">
                        <i class="fa fa-angle-right"></i>
                    </button>
                    <button type="button" aria-label="@AiraNextYearLabel" class="picker-panel-icon-btn" @onclick="@OnClickNextYear">
                        <i class="fa fa-angle-double-right"></i>
                    </button>
                }
            </div>
            <div class="picker-panel-content">
                <table cellspacing="0" cellpadding="0" class="@DateViewClassName">
                    <tbody>
                        <tr>
                            @foreach (var w in WeekLists)
                            {
                                <th>@w</th>
                            }
                        </tr>
                        @for (var week = StartDate; week < EndDate; week = week.AddDays(7))
                        {
                            <tr class="date-table-row">
                                @for (var index = 0; index < 7; index++)
                                {
                                    <td class="@GetDayClass(week.AddDays(index))">
                                        <div>
                                            <DatePickerCell Value="@week.AddDays(index)" Text="@GetDayText(week.AddDays(index).Day)" OnClick="@(async d => await OnClickDateTime(d))" />
                                        </div>
                                    </td>
                                }
                            </tr>
                        }
                    </tbody>
                </table>
                <table class="@YearViewClassName">
                    <tbody>
                        @for (var row = 0; row < 5; row++)
                        {
                            <tr>
                                @for (var index = 0; index < 4; index++)
                                {
                                    <td class="@GetYearClassName(index + row * 4)">
                                        <div>
                                            <DatePickerCell Value="@GetYear(index + row * 4)" Text="@GetYearText(index + row * 4)" OnClick="d => SwitchView(DatePickerViewModel.Month, d)" />
                                        </div>
                                    </td>
                                }
                            </tr>
                        }
                    </tbody>
                </table>
                <table class="@MonthViewClassName">
                    <tbody>
                        @for (var row = 0; row < 3; row++)
                        {
                            <tr>
                                @for (var index = 0; index < 4; index++)
                                {
                                    <td class="@GetMonthClassName(index + row * 4 + 1)">
                                        <div>
                                            <DatePickerCell Value="@GetMonth(index + row * 4 + 1)" Text="@GetMonthText(index + row * 4 + 1)" OnClick="d => SwitchView(DatePickerViewModel.Date, d)" />
                                        </div>
                                    </td>
                                }
                            </tr>
                        }
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    @if (ShowFooter)
    {
        <div class="picker-panel-footer">
            <div class="flex-fill">
                @if (AllowNull)
                {
                    <button type="button" class="btn picker-panel-link-btn is-confirm" @onclick="@ClickClearButton">
                        <span>@ClearButtonText</span>
                    </button>
                }
            </div>
            @if (MinValue == null && MaxValue == null)
            {
                <button type="button" class="btn picker-panel-link-btn is-now" @onclick="@ClickNowButton">
                    <span>@NowButtonText</span>
                </button>
            }
            <button type="button" class="btn picker-panel-link-btn is-confirm" @onclick="@ClickConfirmButton">
                <span>@ConfirmButtonText</span>
            </button>
        </div>
    }
</div>